<template>
<div>
  <el-table :data="brandTableData" style="width: 1200px;margin-left: 2%">
    <el-table-column prop="brandLogoUrl" label="店铺图" width="100">
      <template #default="{ row }">
        <img :src="row.brandLogoUrl" style="width: 100%; height: auto;">
      </template>
    </el-table-column>
    <el-table-column prop="brandName" label="店铺名" width="180"></el-table-column>
    <el-table-column prop="brandDescription" label="店铺描述" width="180"></el-table-column>
    <el-table-column prop="visit" label="进店" width="240">
      <template #default="{ row }">
        <el-button type="primary" style="width: 160px" @click="handleVisitBrand(row)">进店</el-button>
      </template>
    </el-table-column>
    <el-table-column label="其他操作" width="100">
      <template #default="{ row }">
        <el-button type="danger" @click="handleDeleteBrand(row)">取关</el-button>
      </template>
    </el-table-column>
  </el-table>
<!--  <el-pagination-->
<!--    @size-change="handleProductSizeChange"-->
<!--    @current-change="handleProductCurrentChange"-->
<!--    :current-page="productCurrentPage"-->
<!--    :page-sizes="[10, 20, 30]"-->
<!--    :page-size="productPageSize"-->
<!--    layout="total, sizes, prev, pager, next, jumper"-->
<!--    :total="productTotal">-->
<!--  </el-pagination>-->
</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import {
  getFavoriteBrandList,
  deleteFavoriteBrand,
} from '@/common/net/api';
import { useRouter } from 'vue-router';
const router = useRouter();
// 收藏店铺相关数据
const brandTableData = ref([]);
const brandCurrentPage = ref(1);
const brandPageSize = ref(10);
const brandTotal = ref(0);


// 获取收藏店铺列表
const fetchBrandList = async () => {
  try {
    const response = await getFavoriteBrandList(brandCurrentPage.value, brandPageSize.value);
    brandTableData.value = response.data.records
    brandTotal.value = response.data.total;
  } catch (error) {
    ElMessage.error('获取收藏店铺列表失败');
  }
};

// 删除收藏店铺
const handleDeleteBrand = async (row) => {
  try {
    const response = await deleteFavoriteBrand(row.brandId);
    if (response.data.state) {
      ElMessage.success('取关成功');
      brandTableData.value = brandTableData.value.filter(item => item.favoriteBrandId!== row.favoriteBrandId);
    } else {
      ElMessage.error(response.data.msg);
    }
  } catch (error) {
    ElMessage.error('取关失败');
  }
};

// 进店操作
const handleVisitBrand = (row) => {
  console.log(`进入店铺：${row.brandId}`);
  const route = router.resolve({ name: 'StoreView', params: { brandId: row.brandId } });
  window.open(route.href, '_blank');
};

// 处理收藏店铺每页显示数量变化
const handleBrandSizeChange = (newSize) => {
  brandPageSize.value = newSize;
  fetchBrandList();
};

// 处理收藏店铺当前页码变化
const handleBrandCurrentChange = (newPage) => {
  brandCurrentPage.value = newPage;
  fetchBrandList();
};

onMounted(() => {
  fetchBrandList();
});
</script>

<style scoped>
</style>
